<!doctype html>
<html lang="en">
<head>
	<title>PieChart - Animation</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script>
	<style type="text/css">
		#wijpiechart
		{
			width: 756px;
			height: 475px;
		}
	</style>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			var duration = 500;
			var radiusOffset = 10;
			var offset = {};

			$("#wijpiechart").wijpiechart({
				showChartLabels: false,
				hint: {
					content: function () {
						return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
					}
				},
				header: {
					text: "MMO Subscription Market Share"
				},
				animation: {
					enabled: false
				},
				seriesList: [{
					label: "RuneScape",
					legendEntry: true,
					data: 7.5,
					offset: 0
				}, {
					label: "Lineage",
					legendEntry: true,
					data: 6.6,
					offset: 0
				}, {
					label: "Lineage II",
					legendEntry: true,
					data: 6.3,
					offset: 0
				}, {
					label: "Final Fantasy XI",
					legendEntry: true,
					data: 3.1,
					offset: 0
				}, {
					label: "Dofus",
					legendEntry: true,
					data: 2.8,
					offset: 0
				}, {
					label: "EVE Online",
					legendEntry: true,
					data: 1.5,
					offset: 0
				}, {
					label: "Everquest II",
					legendEntry: true,
					data: 1.2,
					offset: 0
				}, {
					label: "EverQuest",
					legendEntry: true,
					data: 1.1,
					offset: 0
				}, {
					label: "Lord of the Rings Online",
					legendEntry: true,
					data: 0.9,
					offset: 0
				}, {
					label: "City of Heroes / Villains",
					legendEntry: true,
					data: 0.8,
					offset: 0
				}, {
					label: "Tibia",
					legendEntry: true,
					data: 0.6,
					offset: 0
				}, {
					label: "All Others",
					legendEntry: true,
					data: 5.4,
					offset: 0
				}, {
					label: "World of Warcraft",
					legendEntry: true,
					data: 62.2,
					offset: 0
				}],
				seriesStyles: [{
					fill: "45-#466a85-#3e5f77", stroke: "#3e5f77", "stroke-width": 1.5
				}, {
					fill: "45-#525252-#494949", stroke: "#494949", "stroke-width": 1.5
				}, {
					fill: "45-#555e5e-#4c5454", stroke: "#4c5454", "stroke-width": 1.5
				}, {
					fill: "45-#333333-#2d2d2d", stroke: "#2d2d2d", "stroke-width": 1.5
				}, {
					fill: "45-#6aaba7-#5f9996", stroke: "#5f9996", "stroke-width": 1.5
				}, {
					fill: "45-#a6a6a6-#959595", stroke: "#959595", "stroke-width": 1.5
				}, {
					fill: "45-#6c8587-#617779", stroke: "#617779", "stroke-width": 1.5
				}, {
					fill: "45-#c7de7a-#b2c76d", stroke: "#b2c76d", "stroke-width": 1.5
				}, {
					fill: "45-#8ede43-#7fc73c", stroke: "#7fc73c", "stroke-width": 1.5
				}, {
					fill: "45-#c3ff00-#afe500", stroke: "#afe500", "stroke-width": 1.5
				}, {
					fill: "45-#a6a6a6-#959595", stroke: "#959595", "stroke-width": 1.5
				}, {
					fill: "45-#53b9fc-#4aa6e2", stroke: "#4aa6e2", "stroke-width": 1.5
				}, {
					fill: "45-#537bfc-#4a6ee2", stroke: "#4a6ee2", "stroke-width": 1.5
				}]
			});

			$("#wijpiechart").bind("wijpiechartmouseover", function (e, objData) {
				if (objData != null) {
					var animation = $("#selAnimation").val();
					if (animation == "None") {
						return;
					}

					var series = objData;
					var sector = $("#wijpiechart").wijpiechart("getSector", series.index);
					var shadow = sector.shadow;
					var tracker = sector.tracker;

					//Scale
					if (animation == "Scale") {
						var center = sector.center;
						sector.animate({
							transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1.1, 1.1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
					}
					//Explode
					else {
						offset = sector.getOffset(radiusOffset);

						sector.animate({
							translation: offset.x + " " + offset.y
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								translation: offset.x + " " + offset.y
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								translation: offset.x + " " + offset.y
							}, duration, "elastic");
						}
					}
				}
			});

			$("#wijpiechart").bind("wijpiechartmouseout", function (e, objData) {
				if (objData != null) {
					var animation = $("#selAnimation").val();

					if (animation == "None") {
						return;
					}

					var series = objData;
					var sector = $("#wijpiechart").wijpiechart("getSector", series.index);
					var shadow = sector.shadow;
					var tracker = sector.tracker;

					//Scale
					if (animation == "Scale") {
						sector.animate({
							transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
						}, duration, "elastic");
						if (shadow) {
							shadow.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								transform: Raphael.format("s{0},{1},{2},{3}", 1, 1, sector.center.x, sector.center.y)
							}, duration, "elastic");
						}
					}
					//Explode
					else {
						sector.animate({
							translation: -offset.x + " " + offset.y * -1
						}, duration, "elastic");

						if (shadow) {
							shadow.animate({
								translation: -offset.x + " " + offset.y * -1
							}, duration, "elastic");
						}
						if (tracker) {
							tracker.animate({
								translation: -offset.x + " " + offset.y * -1
							}, duration, "elastic");
						}
						offset = { x: 0, y: 0 };
					}
				}
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Animation</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<div>
					Animation:
					<select id="selAnimation">
						<option selected="selected">Scale</option>
						<option>Explode</option>
						<option>None</option>
					</select>
				</div>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">

<p>This sample demonstrates how to use animation to enhance your pie charts. This example uses the <b>animation</b> and <b>shadow</b> options and the <b>getOffset</b> method to explode and scale the pie chart.</p>


		</div>
	</div>
</body>
</html>
